<template>
  <view class="viewpoint">
    <view class="title">教室：{{ form.name }} </view>
    <view class="date">预约开始时间：{{ date.start }}</view>
    <view class="date">预约结束时间：{{ date.end }}</view>
    <view class="reason">
      <textarea
        v-model="form.reason"
        style="height: 100%; width: 100%"
        placeholder="请输入预约事由"
      >
      </textarea>
    </view>
    <view class="submit-box">
      <view class="cancel" @tap="back">取消</view>
      <view class="submit" @tap="submit">确认预约</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import moment from "moment";
import { formatTimestamp } from "../../utils/time";
import { booking } from "../../utils/booking";
const form = reactive({
  roomId: "",
  applyDate: "",
  startTime: 0,
  endTime: 0,
  reason: "",
  name: "",
});
//点击提交
const submit = async () => {
  Object.assign(form, {
    applyDate: moment().format("YYYY-MM-DD"),
  });
  const res = await booking(form);
  if (res?.data?.code === 200) {
    uni.showToast({
      title: "预约成功",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
  }
};
//返回
const back = () => {
  uni.navigateBack();
};
const date = ref({
  start: "",
  end: "",
});
onLoad((options) => {
  form.name = options?.name;
  form.roomId = options?.id;
  form.startTime = Number(options?.start);
  form.endTime = Number(options?.end);
  date.value.start = formatTimestamp(Number(options?.start));
  date.value.end = formatTimestamp(Number(options?.end));
});
</script>

<style lang="scss">
page {
  background: #f5f5f5;
  height: 100%;
}
.viewpoint {
  height: 100%;
  padding: 40rpx 20rpx;
  .title {
    height: 50rpx;
    line-height: 50rpx;
    text-align: left;
    font-size: 32rpx;
    font-weight: bold;
  }
  .date {
    height: 50rpx;
    line-height: 50rpx;
    text-align: left;
    font-size: 32rpx;
    font-weight: bold;
  }
  .reason {
    height: 400rpx;
    border: #ccc 1px solid;
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx;
    margin-top: 30rpx;
  }
  .submit-box {
    display: flex;
    height: 150rpx;
    justify-content: space-around;
    .cancel,
    .submit {
      width: 250rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      border-radius: 80rpx;
      margin-top: 30rpx;
      color: #fff;
    }
    .cancel {
      background-color: #e6685d;
    }
    .submit {
      background-color: #b8d587;
    }
  }
}
</style>